<template>
    <div class="fina" v-loading="loading" style="margin-top: 70px;">
        <el-table
            :data="state.tableData"
            style="width: 100%; padding: 15px; padding-top: 0px"
            :header-cell-style="{
                        backgroundColor: 'var(--tableheaderback)',
                        color: 'var(--tableheadercolor)',
                        border: '2px solid var(--tableborder)',
                    }"
                    :cell-style="{border:'2px solid var(--tableborder)'}"
            stripe
            border
        >
        <el-table-column min-width="220px" v-for="(item, index) in state.oldList1" :label="item.label" :prop="state.columns[0].prop"  :key="`col_${index}`" align="center"></el-table-column>
            <el-table-column
                v-for="(item, index) in state.oldList"
                :key="`col_${index}`"
                :prop="state.columns[index+1].prop"
                :label="item.label"
                align="center"
            ></el-table-column>
        </el-table>
        <div class="zhanwei" style="height: 50px; width: 100vw"></div>
    </div>
</template>

<script lang="ts">
export default {
    name: 'Financial',
};
</script>

<script lang="ts" setup>
import { ref, onMounted, reactive, computed, watch } from 'vue';
import X2js from 'x2js';
import { getFinancialRatio } from '@/api/axios/reqTest';
import Sortable from 'sortablejs';
const arr: any = [];
const loading = ref(false)
const state = reactive({
    oldList: [
        {
            label: '',
            prop: 'three',
        },
        {
            label: '',
            prop: 'four',
        },
        {
            label: '',
            prop: 'five',
        },
        {
            label: '',
            prop: 'six',
        },
        {
            label: '',
            prop: 'seven',
        },
    ],
    oldList1: [
        {
            label: '',
            prop: 'two',
        },
    ],
    columns: [
        {
            label: '',
            prop: 'two',
        },
        {
            prop: 'three',
        },
        {
            prop: 'four',
        },
        {
            prop: 'five',
        },
        {
            prop: 'six',
        },
        {
            prop: 'seven',
        },
    ],
    tableData: [
        {
            two: '',
            three: '',
            four: '',
            five: '',
            six: '',
            seven: '',
        },
    ],
    tableConfig: {
        tableItems: [
            {
                label: '',
                prop: 'two',
            },
            {
                label: '',
                prop: 'three',
            },
            {
                prop: 'four',
            },
            {
                prop: 'five',
            },
            {
                prop: 'six',
            },
            {
                prop: 'seven',
            },
        ],
    },
});
onMounted(() => {
    test();
   // columnDrop1();
});

const test = async () => {
    const x2js = new X2js();
    loading.value = true
    const xml = await getFinancialRatio();
    const json = x2js.xml2js(xml as any);
    console.log(json);
    const result: any = json;
    const data = result.FinancialRatio.GrpFinancialRatio.FRatio;
    // console.log(data);

    data.forEach((item: any, index: number) => {
        // console.log(item);

        const entries: any = Object.entries(item);

        arr.push({});
        const composedArr = [...entries[0][1]];

        composedArr.forEach((value: any, index2: number) => {
            //  console.log(value,index2);

            const objKey = ['two', 'three', 'four', 'five', 'six', 'seven'];
            arr[index][objKey[index2]] = value;
            // console.log(arr[index][objKey[0]]);
        });
    });
    //console.log(arr[0]);

    state.tableData = arr.filter((item: any, index: number) => index);
    const label = ref();
    label.value = Object.values(arr[0]).map((item: any) => {
        return item;
    });
    state.oldList1.forEach((item: any, index: number) => {
        item.label = label.value[0];
    });
    state.oldList.forEach((item: any, index: number) => {
        item.label = label.value[index+1];
    });
    loading.value = false
};
const columnDrop1 = () => {
    //console.log(111)

    const tHeader = document.querySelector(`.fina .el-table__header-wrapper tr`) as HTMLElement;
    console.log('tHeader', tHeader);
    Sortable.create(tHeader, {
        animation: 180,
        /** 延迟 */
        // delay: 1,
        filter: '.disabled',
        onEnd: (evt: any) => {
            const oldItem = state.columns[evt.oldIndex];
            state.columns.splice(evt.oldIndex, 1);
            state.columns.splice(evt.newIndex, 0, oldItem);
        },
    });
};
</script>

<style scoped></style>
